<template>
  <div class="app-container">
    <div class="filter-container">
      <el-row>
        <!-- 校区 -->
        <el-select
          v-model="listQuery.orgId"
          placeholder="校区"
          clearable
          style="width: 180px"
          class="filter-item1"
          @change="handleOrgIdChange"
        >
          <el-option
            v-for="option in orgIdOptions"
            :key="option.key"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <!-- 渠道类型 -->
        <el-select
          v-model="listQuery.channelTypeId"
          placeholder="渠道类型"
          clearable
          style="width: 180px"
          class="filter-item1"
          @change="handleChannelTypeIdChange"
        >
          <el-option
            v-for="option in channelTypeIdOptions"
            :key="option.key"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <!-- 渠道 -->
        <el-select
          v-model="listQuery.channelId"
          placeholder="渠道"
          clearable
          style="width: 180px"
          class="filter-item1"
        >
          <el-option
            v-for="option in channelIdOptions"
            :key="option.key"
            :label="option.label"
            :value="option.value"
          />
        </el-select>
        <!-- 咨询 日期 -->
        <el-date-picker
          v-model="listQuery.queryStartDate"
          align="right"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="开始日期"
          style="width: 180px"
        ></el-date-picker>
        <el-date-picker
          v-model="listQuery.queryEndDate"
          style="width: 180px"
          align="right"
          type="date"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          placeholder="结束日期"
        ></el-date-picker>
        <el-button
          v-waves
          class="filter-item"
          type="primary"
          icon="el-icon-search"
          @click="handleFilter"
        >{{ $t("table.search") }}</el-button>
        <el-button
          v-waves
          :loading="downloadLoading"
          v-permission="['business:export']"
          class="filter-item"
          type="primary"
          icon="el-icon-download"
          @click="handleDownload"
        >{{ $t('table.export') }}</el-button>
      </el-row>

    </div>

		<el-alert

						  title=""
						  type="info"
						  description="温馨提示:默认显示本月数据"
						  >
						</el-alert>
    <el-table
      v-loading="listLoading"
      :key="tableKey"
      :data="list"
      border
      fit
      highlight-current-row
      style="width: 100%"
    >
      <el-table-column label="校区" align="center" width="165">
        <template slot-scope="scope">
          <span>{{ scope.row.statOrganizationName }}</span>
        </template>
      </el-table-column>
      <el-table-column label="总线索数" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.rankClueAmount }}</span>
        </template>
      </el-table-column>
      <el-table-column label="诺到访数" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statPromiseVisitNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到访数" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statVisitNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="平均跟进次数（次）" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statAverageFollowNum }}</span>
        </template>
      </el-table-column>
      <el-table-column label="到访率" width align="center">
        <template slot-scope="scope">
          <span>{{ scope.row.statVisitRate }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="listQuery.current"
      :limit.sync="listQuery.size"
      @pagination="getList"
    />
  </div>
</template>

<script>
import { fetchOrg, fetchChannel, fetchCourse } from "@/api/clue"
import {
  fetchCampusVisitCon,
  fetchExportCampusVisitCon
} from "@/api/statistics"
import waves from "@/directive/waves" //  水波纹指令
import Pagination from "@/components/Pagination" //  Secondary package based on el-pagination
import { parseTime } from "@/utils";
import permission from "@/directive/permission/index.js"; // 权限判断指令

export default {
  name: "campusVisitCon",
  components: { Pagination },
  directives: {
    waves,
    permission
  },
  data() {
    return {
      orgIdOptions: [], // 校区
      channelTypeIdOptions: [], // 渠道类型
      channelIdOptions: [], // 渠道
      departmentIdOptions: [], // 科系
      courseOptions: [], // 课程
      ownerIdOptions: [], // 咨询师
      tableKey: 0,
      list: null,
      total: 0,
      listLoading: true,
      listQuery: {
        current: 1,
        size: 20,
        // 渠道类型
        channelTypeId: '',
        // 渠道
        channelId: '',
        // 校区
        orgId: '',
        queryStartDate: "",
        queryEndDate: "",
      },
      downloadLoading: false,
    }
  },
  created() {
    this.getList()
    this.getOrgIdOptions()
  },
  methods: {
    getList() {
      this.listLoading = true
      fetchCampusVisitCon(this.listQuery).then(response => {
        this.list = response.data
        this.total = response.count
        this.listLoading = false
      })
    },
    handleFilter() {
      this.listQuery.current = 1
      this.getList()
    },
    //  所有的获取下拉框数据方法
    //  获取所有校区()
    getOrgIdOptions() {
      const queryMethod = "queryClueOrStatistic"
      fetchOrg(queryMethod).then(response => {
        this.orgIdOptions = response.data
      })
    },
    // 根据校区获取所有渠道类型(校区ID)
    getChannelTypeOptions(queryId, queryKey) {
      fetchChannel(queryId, "0").then(response => {
        this.channelTypeIdOptions = response.data
      })
    },
    // 根据渠道ID获取对应的渠道(校区ID)
    getChannelOptions(queryId, queryKey) {
      fetchChannel(queryId, "1").then(response => {
        this.channelIdOptions = response.data
      })
    },


    // 所有change事件
    // 校区变化（重置渠道类型、渠道、科系、课程、咨询师）
    handleOrgIdChange(orgId) {
      this.listQuery.channelTypeId = ''
      this.listQuery.channelId = ''


      this.getChannelTypeOptions(orgId)


      this.channelIdOptions = null

    },
    // 渠道类型变化（重置渠道）
    handleChannelTypeIdChange(channelTypeId) {
      this.listQuery.channelId = ''
      this.getChannelOptions(channelTypeId)
    },

    handleDownload() {
      this.downloadLoading = true;

      fetchExportCampusVisitCon(this.listQuery).then(response => {
        const exportList = response.data;
        import("@/vendor/Export2Excel").then(excel => {
          const tHeader = [
            "校区",
            "总线索数",
            "诺到访数",
            "到访数",
            "平均跟进次数",
            "到访率"
          ];
          const filterVal = [
            "statOrganizationName",
            "rankClueAmount",
            "statPromiseVisitNum",
            "statVisitNum",
            "statAverageFollowNum",
            "statVisitRate"
          ];
          const data = this.formatJson(filterVal, exportList);
          excel.export_json_to_excel({
            header: tHeader,
            data,
            filename: "校区到访率"
          });
          this.downloadLoading = false;
        });
      });

    },
    formatJson(filterVal, jsonData) {
      return jsonData.map(v =>
        filterVal.map(j => {
          if (j === "createTime") {
            return parseTime(v[j]);
          } else {
            return v[j];
          }
        })
      );
    }
  }
}
</script>

